<template>
  <div v-url="{ vue: this }" class="myCourses">
    <el-input
      v-model="filterText"
      class="search-inp"
      style="width:200px"
      placeholder="输入关键字进行过滤"
      clearable
      @blur="pageData.pageNum=1;pagenation()"
      @clear="pageData.pageNum=1;pagenation()"
    />
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane :label="`进行中`" name="first">
        <div v-for="item in tableData" :key="item.id" class="course-li">
          <img :src="item.picFile" alt="">
          <div class="course-li-right">
            <div class="course-title">{{ item.name }}</div>
            <div class="course-time">
              {{ item.createTime && item.createTime.split(" ")[0] }}
            </div>
            <div class="progress">
              <div class="progress-warpper">
                <div class="progress-box">
                  <div
                    class="prgress-p"
                    :style="{ width: (item.precent || 0) + '%' }"
                  />
                  <div
                    class="triggle"
                    :style="{ left: (item.precent || 0) + '%' }"
                  />
                </div>
                <span
                  class="progress-tips"
                >学习进度：{{ item.precent || 0 }}%</span>
              </div>
              <div class="btn-wrapper">
                <button
                  :class="[(item.precent || 0) < 5 ? 'lowPrecent' : '']"
                  style="margin-right: 20px"
                  @click="opendCommentCourse(item)"
                >
                  课程评价
                </button>
                <button
                  class="study"
                  @click="
                    $router.push({
                      name: 'CourseBody',
                      params: { id: item.id },
                    })
                  "
                >
                  继续学习
                </button>
              </div>
            </div>
            <div class="quitStudy" @click="removeCourse(item)">
              <i class="el-icon-close" />
              退出学习
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane :label="`已完成`" name="second">
        <div v-for="item in tableData" :key="item.id" class="course-li">
          <img :src="item.picFile" alt="">
          <div class="course-li-right">
            <div class="course-title">{{ item.name }}</div>
            <div class="course-time">
              {{ item.createTime && item.createTime.split(" ")[0] }}
            </div>
            <div class="progress">
              <div class="progress-warpper">
                <div class="progress-box">
                  <div
                    class="prgress-p"
                    :style="{ width: (item.precent || 0) + '%' }"
                  />
                  <div
                    class="triggle"
                    :style="{ left: (item.precent || 0) + '%' }"
                  />
                </div>
                <span
                  class="progress-tips"
                >学习进度：{{ item.precent || 0 }}%</span>
              </div>
              <div class="btn-wrapper">
                <button
                  :class="[(item.precent || 0) < 5 ? 'lowPrecent' : '']"
                  style="margin-right: 20px"
                  @click="opendCommentCourse(item)"
                >
                  课程评价
                </button>
                <button
                  class="study"
                  @click="
                    $router.push({
                      name: 'CourseBody',
                      params: { id: item.id },
                    })
                  "
                >
                  继续学习
                </button>
              </div>
            </div>
            <div class="quitStudy" @click="removeCourse(item)">
              <i class="el-icon-close" />
              退出学习
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div>
      <pagenation :params="pageData" style="float: right" />
    </div>

    <!-- <template v-if="tableData.length">
      <div class="coursesList">
        <div v-for="item in tableData" :key="item.id" class="list-item">
          <h4 :title="item.name" @click="$router.push({name: 'CourseBody', params: { id: item.id }})">
            {{ item.name }}
            <span style="font-size:12px;font-weight: normal;text-decoration: none;">{{ item.createTime && item.createTime.split(' ')[0] }}</span>
          </h4>

          <div class="progress-bar">
            <div class="progress-title">学习进度</div>
            <div class="progress"><el-progress :percentage="item.precent || 0" /></div>
          </div>
          <p class="progress-tool">
            <span style="color:red" @click="removeCourse(item)">移出学习</span>
            <span @click="opendCommentCourse(item)">课程评价</span>
          </p>
        </div>
      </div>
      <div>
        <pagenation :params="pageData" style="float: right" />
      </div>
    </template>

    <empty-data v-else text="暂无数据" /> -->

    <!-- 评价 -->
    <el-dialog title="评价" :visible.sync="commentParams.visible" width="500px">
      <el-form
        ref="form"
        :model="commentParams.commentInfoForm"
        label-width="40px"
      >
        <el-form-item label="评分">
          <el-rate v-model="commentParams.commentInfoForm.score" />
        </el-form-item>
        <el-form-item label="评价">
          <el-input
            ref="commentInfoFormRemark"
            v-model="commentParams.commentInfoForm.remark"
            type="textarea"
            :rows="2"
            :maxlength="50"
            show-word-limit
            placeholder="请输入内容"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="commentParams.confirm"
        >确 定</el-button>
        <el-button @click="commentParams.visible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import EmptyData from '@/components/EmptyData'
import {
  myLearnBookQuery,
  scroeLearnBook,
  quitLearnBook,
  getScroeLearnBook
} from '@/api/learnCenter'
import { fileHostUrl } from '@/utils'
export default {
  name: 'MyCourses',
  components: {
    EmptyData
  },
  data() {
    return {
      activeName: 'first',
      filterText: '',
      tableData: [], // 我的课程列表
      allTableData: [], // 我的课程列表
      commentParams: {
        visible: false,
        commentInfoForm: {
          id: '',
          score: 0,
          remark: ''
        },
        confirm: () => {}
      },
      pageData: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
        sizeChange: () => {},
        currentChange: () => {}
      }
    }
  },
  watch: {
    activeName() {
      this.pageData.pageNum = 1
      this.pagenation()
    }
  },
  created() {
    this.initWindow()
  },
  methods: {
    initWindow() {
      const vPar = new this.ParamArr()
      myLearnBookQuery(vPar).then((vPar) => {
        const nodes = []
        const table = new this.SQLTable(vPar.getTable('k_learn_book'))
        table.first()
        while (!table.eof()) {
          const node = {}
          node['id'] = table.getValueByName('ID')
          node['name'] = table.getValueByName('Name')
          node['createTime'] = table.getValueByName('CreateTime')
          node['posCount'] = table.getValueByName('PosCount')
          node['posVideo'] = table.getValueByName('PosVideo')
          node['posTime'] = table.getValueByName('PosTime')
          node['bookCount'] = table.getValueByName('BookCount')
          node['videoCount'] = table.getValueByName('VideoCount')
          node['bookTime'] = table.getValueByName('BookTime')
          node['picFile'] = fileHostUrl + '/' + table.getValueByName('PicFile')

          node['precent'] =
            (Math.floor((node['posTime'] / node['bookTime']) * 100) >= 98
              ? 100
              : Math.floor((node['posTime'] / node['bookTime']) * 100)) || 0
          nodes.push(node)
          table.next()
        }
        this.allTableData = nodes

        // 分页操作
        this.pagenation()
      })
    },
    selectType(n) {
      let tableData = []
      switch (n) {
        case 'first':
          tableData = this.allTableData.filter(item => item.precent != 100)
          break
        case 'second':
          tableData = this.allTableData.filter(item => item.precent == 100)
          break
      }
      return tableData
    },
    // 分页操作
    pagenation() {
      // this.pageData.pageNum = 1
      const allTableData = this.allTableData
      const pageNum = this.pageData.pageNum
      const pageSize = this.pageData.pageSize

      this.tableData = this.selectType(this.activeName)
      // 根据名称筛选
      this.tableData = this.tableData.filter(item => {
        return item.name.includes(this.filterText)
      })

      this.pageData.total = this.tableData.length // 经过筛选之后的数据总数
      // 显示数据
      this.tableData = this.tableData.slice(
        (pageNum - 1) * pageSize,
        pageNum * pageSize
      )

      this.pageData.sizeChange = (pageSize) => {
        this.pageData.pageSize = pageSize
        this.pagenation()
        // this.tableData = allTableData.slice(
        //   (pageNum - 1) * pageSize,
        //   pageNum * pageSize
        // )
      }
      this.pageData.currentChange = (pageNum) => {
        this.pageData.pageNum = pageNum
        this.pagenation()
        // if (allTableData.length < this.pageData.pageSize) {
        //   return (this.pageData.pageNum = 1)
        // }
        // this.tableData = allTableData.slice(
        //   (pageNum - 1) * pageSize,
        //   pageNum * pageSize
        // )
      }
    },
    opendCommentCourse(item) {
      // if ((item.precent || 0) < 5) {
      //   return this.$message.error('学习完百分之5才能评分。')
      // }
      // 获取上次评价内容
      const vPar = new this.ParamArr()
      vPar.setStr('ID', item.id)
      getScroeLearnBook(vPar).then((vPar) => {
        // this.commentParams.commentInfoForm = {
        //   id: item.id,
        //   score: vPar.getInt('Score'),
        //   remark: vPar.getStr('Remark')
        // }
        this.commentParams.visible = true
        this.commentParams.confirm = () => {
          const commentInfoForm = this.commentParams.commentInfoForm
          if (!commentInfoForm.remark) {
            this.$refs.commentInfoFormRemark.focus()
            return this.$message.warning('请输入评价')
          }
          const vPar = new this.ParamArr()
          vPar.setStr('ID', item.id)
          vPar.setInt('Score', commentInfoForm.score)
          vPar.setStr('Remark', commentInfoForm.remark)
          scroeLearnBook(vPar).then((vPar) => {
            this.commentParams.visible = false
          })
        }
      })
    },
    removeCourse(row) {
      this.$comfirmDialog({
        message: `您确定将课程"${row.name}"移出学习列表吗?`,
        confirm: () => {
          const vPar = new this.ParamArr()
          vPar.setStr('ID', row.id)
          quitLearnBook(vPar).then((vPar) => {
            this.allTableData = this.allTableData.filter(
              (item) => item.id !== row.id
            )
            this.tableData = this.tableData.filter(
              (item) => item.id !== row.id
            )
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.myCourses {
  position: relative;
  width: 100%;
  // padding: 10px 0 10px 10px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  .coursesList {
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    .list-item {
      position: relative;
      box-sizing: border-box;
      padding: 0 10px;
      margin-right: 10px;
      margin-bottom: 10px;
      width: 260px;
      height: 172px;
      flex-shrink: 0;
      background-image: url("../../../assets/user/card_2.png");
      background-size: 260px 172px;
      &:hover {
        box-shadow: 5px 5px 8px rgb(0 0 0 / 10%);
      }
      h4 {
        height: 35px;
        cursor: pointer;
        display: -webkit-box; /* 盒子类型 */
        word-break: break-all; /* 自动换行的处理方法。允许在单词内换行 */
        text-overflow: ellipsis; /* 溢出时用... */
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; /* 行数 */
        span {
          position: absolute;
          top: 5px;
          right: 5px;
        }
      }
      span {
        font-size: 14px;
        color: #888888;
        display: block;
        margin-bottom: 5px;
      }
      .evaluate {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 10px 0;
        cursor: pointer;
      }
    }
  }
}
.join-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  button {
    margin-left: 5px;
    width: 120px;
    height: 30px;
    border: none;
    border-radius: 5px;
    box-shadow: none;
    font-size: 13px;
    font-weight: 400;
    color: #fff;
    cursor: pointer;
    background-color: $primaryColor;
    border-radius: 2px;
  }
}
.remove-course {
  border-top: 1px solid rgba(153, 153, 153, 0.15);
  line-height: 40px;
  text-align: center;
  color: #333;
  font-size: 16px;
  cursor: pointer;
  &:hover {
    color: $plainColor;
  }
}

.progress-bar {
  display: flex;
  align-items: center;
  margin-top: 35px;
  .progress-title {
    font-size: 12px;
    margin-right: 5px;
  }
  .progress {
    flex: 1;
  }
}
.progress-tool {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 35px;
  > span {
    cursor: pointer;
    font-size: 12px !important;
  }
  > span:nth-child(2) {
    &:hover {
      color: #333 !important;
    }
  }
}

.course-li {
  width: 100%;
  background-color: #ffffff;
  border-radius: 2px;
  padding: 24px;
  margin-bottom: 24px;
  display: flex;
	border: solid 1px #e9e9e9;
  &:hover {
    box-shadow: 3px 5px 9px 1px rgba(45, 61, 103, 0.1);
  }
  img {
    width: 160px;
    height: 90px;
    margin-right: 24px;
  }
  .course-li-right {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .course-title {
      font-size: 16px;
      font-weight: normal;
      line-height: 25px;
      color: #333333;
    }
    .course-time {
      font-size: 14px;
      font-weight: normal;
      line-height: 25px;
      color: #999999;
    }
    .progress {
      display: flex;
      justify-content: space-between;
      .progress-warpper {
        flex: 1;
        display: flex;
        align-items: center;
        margin-right: 120px;
        .progress-box {
          flex: 1;
          height: 8px;
          background-color: #e9e9e9;
          border-radius: 4px;
          position: relative;
          .prgress-p {
            height: 100%;
            background-color: $primaryColor;
            border-radius: 4px;
            // border-top-left-radius: 4px;
            // border-bottom-left-radius: 4px;
          }
          .triggle {
            position: absolute;
            transform: translateX(-50%);
            top: -7px;
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 7px solid $primaryColor;
          }
        }
        .progress-tips {
          font-size: 14px;
          line-height: 25px;
          color: #5b5b5b;
          margin-left: 15px;
        }
      }
      .btn-wrapper {
        button {
          cursor: pointer;
          background-color: #ffffff;
          border-radius: 2px;
          border: solid 1px #3d6dea;
          font-size: 14px;
          color: #3d6dea;
          padding: 6px 16px;
          &.study {
            background-color: #3d6dea;
            color: #fff;
          }
          &.lowPrecent {
            background-color: #f7f7f7;
            border: solid 1px #d5d5d5;
            color: #999999;
          }
        }
      }
    }
    .quitStudy {
      cursor: pointer;
      opacity: 0;
      position: absolute;
      top: 0;
      right: 0;
      font-size: 12px;
      color: #ffffff;
      z-index: 10;
      border-radius: 2px;
      background-color: rgba(0, 0, 0, 0.4);
      padding: 2px 3px;
      transition: all ease-in 0.1s;
    }
    &:hover {
      .quitStudy {
        opacity: 1;
      }
      .progress-warpper {
        .progress-tips {
          color: #3d6dea;
        }
      }
    }
  }
}
.search-inp {
  position: absolute;
  right: 0;
  z-index: 1;
}
::v-deep .el-tabs .el-tabs__content {
  padding-right: 0;
}
::v-deep.el-tabs--card>.el-tabs__header {
  border-bottom: none;
}
::v-deep.el-tabs--card>.el-tabs__header .el-tabs__nav {
  border: none;
}
::v-deep.el-tabs--card>.el-tabs__header .el-tabs__item {
  border-left: none;
  position: relative;
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    border-left: 1px solid #E4E7ED;
    transform: translateY(-50%);
    height: 50%;
  }
  &:first-child {
    &::before {
      display: none;
    }
  }
}
.myCourses {
  ::v-deep .el-tabs__item.is-active {
    color: $primaryColor;
  }
}

</style>
